<template>
  <div class="car">
    <van-checkbox-group v-model="result">
      <van-checkbox :name="item" v-for="item in cartList" :key="item.id" @click="singleCheckFn">     
        <van-card
          :num="item.number"
          :price="item.market_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
      />
      <van-button type="danger" class="del" @click="del(item)">删除</van-button>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交菜单栏 -->
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click='checkAllFn'>全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { GetCarData } from "@/utils/http";
import {DelCarData} from '@/utils/http'
export default {
  name: "Car",
  props: [""],
  data() {
    return {
      result: [],
      cartList: [],
      checked:false,
    };
  },

  components: {},

  computed: {
    //监听依赖的属性
    totalPrice(){
      let sum=0
      this.result.forEach((item) => {
        sum+=item.retail_price*item.number*100
      });
      return sum
    }
  },

  created() {
    GetCarData().then((res) => {
      // console.log(res);
      this.cartList = res.data.cartList;
    });
  },

  mounted() {
  
  },

  methods: {
    //提交订单
      onSubmit(){
      
    }, 
    //修改地址
    onClickEditAddress(){

    },
    //全选
    checkAllFn(){
      // console.log(this.checked);
      if(this.checked){
        this.result=this.cartList
      }else{
        this.result=[]
      }
    },
    //单选
    singleCheckFn(){
      // console.log(this.result);
      if(this.result.length==this.cartList.length && this.result.length!=0){
        this.checked=true
      }else{
         this.checked=false
      }
    },
    //删除选中产品
    del(item){
      // console.log(11,item);
      DelCarData({productIds:item.product_id.toString()}).then(res=>{
        // console.log(res);
        // if(res.data.errno==0){
          location.reload()
        // }
      })

      
    }
  },
};
</script>
<style lang="less" scoped>
/deep/.van-checkbox__label {
  flex: 1;
  position: relative;
}
.van-submit-bar {
  bottom: 50px;
}
.del{
  width: 60px;
  height: 30px;
  font-size: 12px;
  position: absolute;
  top: 43px;
  left:280px
}

</style>